<template>
  <div>
    <Header :activeIndex="0"/>
    <div class="container">
      <div class="content">
        <div class="aside">
          <!-- 票房排行 -->
            <rankbox />
            <!-- 总票房 -->
            <totalbox />
            <!-- 期待数 -->
            <mostexpectwrapper />
            <!-- top100 -->
            <top />
        </div>
        <div class="main">
          <div class="movie-grid">
            <!-- 正在热映 -->
            <weilreceive />
            <!-- 即将上映 -->
            <futureVue />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header'
import rankbox from './right/rankbox.vue'
import totalbox from './right/totalbox.vue'
import mostexpectwrapper from './right/mostexpect'
import Footer from '@/components/Footer'
import top from './right/top'
import weilreceive from './left/weilreceive'
import futureVue from './left/future.vue'
export default {
  name: 'TtmsIndex',
  components: { Header,rankbox,totalbox,mostexpectwrapper,top,Footer,weilreceive,futureVue },
  data () {
    return {}
  },

  mounted () {},

  methods: {}
}
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}
.content {
  overflow: hidden;
  margin-top: 62px;
}
.aside {
  float: right;
  width: 360px;
}
.main {
  padding: 0 18px;
  margin-right: 363px;
}
.movie-grid {
    margin-top: -62px;
}
</style>
